{% extends 'layout.html' %}

{% load static %}

{% block CSS %}
    <link rel="stylesheet" href="{% static 'css/remark.css' %}">
    <title>帖子详情</title>
{% endblock %}

{% block content %}
    <div class="remark_main_container">
        <div class="remark_data_container">
            {#            {% for item in Post %}#}
            <div class="remark_title">
                <h1>{{ item.title }}</h1>
            </div>
            <hr class="custom-hr">
            <div class="remark_avatar_time">
                <img src="/media/{{ item.UserId.avatar_url }}" alt="头像" class="author-avatar"
                     onclick="location.href='{% url '详情页面' item.UserId.id %}'" style="border-radius: 50%;">
                <span>&nbsp;<a href="{% url '详情页面' item.UserId.id %}">{{ item.UserId.username }}</a></span>
                <span>&nbsp;{{ item.publishTime }}&nbsp;</span>
                <span>阅读:&nbsp;{{ item.browseNumber }}</span>
                <hr class="custom-hr">
            </div>

            <div class="remark_content_bottom">
                <div class="remark_left">
                    <div class="remark_left_up">
                        <ul class="ul_style">
                            <li><img src="{% static 'images/icon/like.png' %}" alt="赞" class="icon like_btn"></li>
                            <li class="remark_fontSize count_number">{{ item.likeNumber }}</li>
                            <li><img src="{% static 'images/icon/unlike.png' %}" alt="踩" class="icon unlike_btn"></li>
                        </ul>
                    </div>
                    <div class="remark_left_down">
                    </div>
                </div>
                <div class="remark_right">
                    <div class="remark_content_div">
                        {{ item.content|safe }}
                    </div>
                </div>
            </div>
            {#            {% endfor %}#}
        </div>

        <div class="write_remarks">
            <div class="write_remark_avatar">
                <a href="{% url '个人主页' %}">
                    <img class="img-circle"
                         src="{% static 'images/avatar/default.png' %}" width="45px"
                         alt="我的头像">
                </a>
            </div>

            <div class="write_areas">
                <form id="comment_reply_form" class="comment_reply_form" role="form"
                      action="" enctype="multipart/form-data">
                    {% csrf_token %}
                    <textarea class="file-comment" id="MyRemark" name="content" cols="100%" rows="2" maxlength="3000"
                              required
                              title="回复" placeholder="在这里写评论..."></textarea>
                    <div class="remark_button_div">
                        <button type="button" id="comment_reply_submit_btn" class="form-control btn btn-link"
                                style="border-radius: 5px">
                            提交评论
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="w_big_container">
            <div class="remark_big_div">
                {% for item in Remarks %}
                    <div class="w_container-big">
                        <div class="w_avatar"><a href="{% url '详情页面' item.UserId.id %}"><img
                                src="/media/{{ item.UserId.avatar_url }}" alt="头像"
                                class="avatar"></a></div>
                        <div class="w_container">
                            <div class="w_row">
                                <div class="w_box" style="font-weight: bold;">{{ item.UserId.username }}</div>
                                <div class="w_box">{{ item.publishTime }}</div>
                                <div class="w_box remeak_like_btn">赞&nbsp;{{ item.likesNumber }}</div>
                                <div class="w_box remeak_unlike_btn">踩 &nbsp;{{ item.dislikesNumber }}</div>
                                <div class="w_box reply_btn">回复</div>
                                <div class="w_empty_box" id="hiddenDiv" style="display: none;">{{ item.id }}</div>
                            </div>
                            <hr class="custom-hr">
                            <div class="w_content">
                                <p>{{ item.content }}</p>
                            </div>
                            <div class="w_other_reply">
                                <form class="reply_form comment_reply_form" method="post" style="display: none;"
                                      role="form"
                                      action="" enctype="multipart/form-data">
                                    <textarea name="reply_content" class="file-comment reply_content reply_textarea"
                                              cols="100%"
                                              rows="1" maxlength="3000" required
                                              placeholder="在这里写回复..."></textarea>
                                    <div class="remark_button_div">
                                        <button type="button"
                                                class="form-control btn btn-link remark_reply_btn"
                                                style="border-radius: 5px">
                                            回复
                                        </button>
                                    </div>
                                </form>
                                <div class="reply_big_div">
                                    {% for reply in item.reply_list %}
                                        <div class="reply_div">
                                            <div class="reply_div_left"><a
                                                    href="{% url '详情页面' reply.author.id %}"><img
                                                    src="/media/{{ reply.author.avatar_url }}" alt="头像"
                                                    class="avatar" style="border-radius: 50%; width: 50%; height: 50%;"></a>
                                            </div>
                                            <div class="reply_div_right">
                                                <div class="reply_top_div">
                                                    <div class="reply_user">{{ reply.author.username }}&nbsp;回复&nbsp;{{ reply.UserId.username }}</div>
                                                    <div class="reply_time">{{ reply.publishTime }}</div>
                                                    <div class="reply_likes reply_likes_btn">
                                                        赞&nbsp;{{ reply.likes_number }}</div>
                                                    <div class="reply_dislikes reply_dislikes_btn">
                                                        踩&nbsp;{{ reply.dislikes_number }}</div>
                                                    <div class="reply_inside_div reply_inside_btn">回复</div>
                                                    <div class="reply_id_div"
                                                         style="display: none;">{{ reply.id }}</div>
                                                </div>
                                                <hr class="custom-hr">
                                                <div class="reply_content">{{ reply.content }}</div>
                                                <div class="reply_form_bottom_div">
                                                    <form class="reply_form_inside comment_reply_form" method="post"
                                                          style="display: none;" role="form" action=""
                                                          enctype="multipart/form-data">
                                                <textarea name="reply_content"
                                                          class="file-comment reply_content_inside reply_textarea_inside"
                                                          cols="100%" rows="1" maxlength="3000" required
                                                          placeholder="在这里写回复..."></textarea>
                                                        <div class="remark_button_div">
                                                            <button type="button"
                                                                    class="form-control btn btn-link remark_reply_inside_btn"
                                                                    style="border-radius: 5px">
                                                                回复
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <script type="text/javascript">
        let intervalId;
        $(document).ready(function () {
            AddRemark();
            clickLike();
            clickunLike();
            click_remeak_like_btn();
            click_remeak_unlike_btn();
            ClickReply();
            ClickReplyBtn();
            Click_reply_likes_btn();
            Click_reply_dislikes_btn();
            ClickInsideReply();
            AddReply();
            intervalId = setInterval(checkNewComments, 3000); // 每 60 秒检查一次
        });

        //刷新评论区
        function checkNewComments() {
            // 发送 AJAX 请求,获取最新的评论数据
            $.ajax({
                url: '{% url '获取评论' %}',
                type: 'POST',
                data: {
                    frontend_source: 'RemarkPage',
                    post_id: {{ post_id }},
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function (response) {
                    if (response.status) {
                        // 更新评论区的 HTML 内容
                        updateComments(response.comments);
                    } else {
                        // 处理错误情况
                        console.log('Error fetching new comments:', response.error);
                    }
                },
                error: function (xhr, errmsg, err) {
                    // 处理 AJAX 请求错误
                    console.log('AJAX Error:', err);
                }
            });
        }

        function updateComments(newComments) {
            // 清空原有的评论
            $('.remark_big_div').empty();

            // 添加新的评论
            for (var i = 0; i < newComments.length; i++) {

                let replyHtml = '';

                if (newComments[i].reply_list.length > 0) {
                    for (var j = 0; j < newComments[i].reply_list.length; ++j) {
                        replyHtml += `
                            <div class="reply_div">
                                <div class="reply_div_left"><a href="/video/videointro/selfinformation/${newComments[i].reply_list[j].author.id}/"><img src="
                                    /media/${newComments[i].reply_list[j].author.avatar_url}" alt="头像" class="avatar" style="border-radius: 50%; width: 50%; height: 50%;"></a></div>
                                <div class="reply_div_right">
                                    <div class="reply_top_div">
                                        <div class="reply_user">${newComments[i].reply_list[j].author.username}&nbsp;回复&nbsp;
                                            ${newComments[i].reply_list[j].UserId.username}</div>
                                        <div class="reply_time">${newComments[i].reply_list[j].publishTime}</div>
                                        <div class="reply_likes reply_likes_btn">赞&nbsp;
                                            ${newComments[i].reply_list[j].likes_number}</div>
                                        <div class="reply_dislikes reply_dislikes_btn">
                                            踩&nbsp;${newComments[i].reply_list[j].dislikes_number}</div>
                                        <div class="reply_inside_div reply_inside_btn">回复</div>
                                        <div class="reply_id_div" style="display: none;">${newComments[i].reply_list[j].id}</div>
                                    </div>
                                    <hr class="custom-hr">
                                        <div class="reply_content">${newComments[i].reply_list[j].content}</div>
                                        <div class="reply_form_bottom_div">
                                            <form class="reply_form_inside comment_reply_form" method="post"
                                                  style="display: none;" role="form" action=""
                                                  enctype="multipart/form-data">
                                                <textarea name="reply_content"
                                                          class="file-comment reply_content_inside reply_textarea_inside"
                                                          cols="100%" rows="1" maxlength="3000" required
                                                          placeholder="在这里写回复..."></textarea>
                                                <div class="remark_button_div">
                                                    <button type="button"
                                                            class="form-control btn btn-link remark_reply_inside_btn"
                                                            style="border-radius: 5px">
                                                        回复
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                </div>
                            </div>
                    `;
                    }
                }


                var newCommentHtml = `
                    <div class="w_container-big">
                        <div class="w_avatar"><a href="/video/videointro/selfinformation/${newComments[i].UserId.id}/"><img src="/media/${newComments[i].UserId.avatar_url}" alt="头像"
                                                              class="avatar"></a></div>
                        <div class="w_container">
                            <div class="w_row">
                                <div class="w_box" style="font-weight: bold;">${newComments[i].UserId.username}</div>
                                <div class="w_box">${newComments[i].publishTime}</div>
                                <div class="w_box remeak_like_btn">赞 &nbsp;${newComments[i].likesNumber}</div>
                                <div class="w_box remeak_unlike_btn">踩 &nbsp;${newComments[i].dislikesNumber}</div>
                                <div class="w_box reply_btn">回复</div>
                                <div class="w_empty_box" id="hiddenDiv" style="display: none;">${newComments[i].id}</div>
                            </div>
                            <hr class="custom-hr">
                                <div class="w_content">
                                    <p>${newComments[i].content}</p>
                                </div>
                                <div class="w_other_reply">
                                    <form class="reply_form comment_reply_form" method="post" style="display: none;"
                                          role="form"
                                          action="" enctype="multipart/form-data">
                                    <textarea name="reply_content" class="file-comment reply_content reply_textarea"
                                              cols="100%"
                                              rows="1" maxlength="3000" required
                                              placeholder="在这里写回复..."></textarea>
                                        <div class="remark_button_div">
                                            <button type="button"
                                                    class="form-control btn btn-link remark_reply_btn"
                                                    style="border-radius: 5px">
                                                回复
                                            </button>
                                        </div>
                                    </form>
                                    <div class="reply_big_div">
                                        ${replyHtml}
                                    </div>
                                </div>
                        </div>
                    </div>
        `;

                // 将新的评论 HTML 插入到 remark_big_div 中
                $('.remark_big_div').append(newCommentHtml);
            }

        }

        function ClickReplyBtn() {
            // 当表单提交时，发送Ajax请求
            $(document).on('click', '.remark_reply_btn', function (event) {
                // 缓存$(this)，指向当前点击的按钮
                var $btn = $(this);

                // 防止表单默认提交
                event.preventDefault();
                event.stopPropagation();

                var remarkId = $btn.closest(".w_container-big").find(".w_empty_box").text();
                var replyContent = $btn.closest(".w_container-big").find(".reply_content").val();

                // 发送实际的Ajax请求
                $.ajax({
                    url: "{% url '回复评论' %}",
                    type: "POST",
                    data: {
                        frontend_source: 'RemarkPage',
                        remark_id: remarkId,
                        post_id: {{ post_id }},
                        content: replyContent,
                    },
                    success: function (response) {
                        if (response.status) {
                            addReplySection(response.new_comment);
                            $btn.closest(".w_container-big").find(".reply_content").val(''); // 清空输入框内容
                            // 重新设置 setInterval
                            intervalId = setInterval(checkNewComments, 3000);
                        }
                    },
                    error: function (xhr, errmsg, err) {
                        console.log("Error:", err);
                    }
                });
            });
        }

        //没用上
        function addReplySection(newComment) {
            var newReplyHtml = `
            <div class="reply_div">
                <div class="reply_div_left"><a href="/video/videointro/selfinformation/${newComment.author.id}/"><img src="
                  /media/${newComment.author.avatar_url}" alt="头像"
                                                            class="avatar"
                                                            style="border-radius: 50%; width: 50%; height: 50%;"></a></div>
                <div class="reply_div_right">
                    <div class="reply_top_div">
                        <div class="reply_user">${newComment.author.username}&nbsp;回复&nbsp;
                            ${newComment.UserId.username}</div>
                        <div class="reply_time">${newComment.publishTime}</div>
                        <div class="reply_likes reply_likes_btn">赞&nbsp;
                            ${newComment.likesNumber}</div>
                        <div class="reply_dislikes reply_dislikes_btn">
                            踩&nbsp;${newComment.dislikesNumber}</div>
                        <div class="reply_inside_div reply_inside_btn">回复</div>
                        <div class="reply_id_div" style="display: none;">${newComment.id}</div>
                    </div>
                    <hr class="custom-hr">
                        <div class="reply_content">${newComment.content}</div>
                        <div class="reply_form_bottom_div">
                            <form class="reply_form_inside comment_reply_form" method="post"
                                  style="display: none;" role="form" action=""
                                  enctype="multipart/form-data">
                                                <textarea name="reply_content"
                                                          class="file-comment reply_content_inside reply_textarea_inside"
                                                          cols="100%" rows="1" maxlength="3000" required
                                                          placeholder="在这里写回复..."></textarea>
                                <div class="remark_button_div">
                                    <button type="button"
                                            class="form-control btn btn-link remark_reply_inside_btn"
                                            style="border-radius: 5px">
                                        回复
                                    </button>
                                </div>
                            </form>
                        </div>
                </div>
            </div>
        `;

            $(".reply_big_div").prepend(newReplyHtml);
        }


        function ClickReply() {
            // 为共同的父元素绑定事件委托
            $(document).on('click', '.reply_btn', function (event) {
                event.stopPropagation();

                // 找到相应的回复表单
                var replyForm = $(this).closest(".w_container-big").find(".reply_form");
                // 如果表单已经可见，再次点击将关闭表单
                if (replyForm.is(":visible")) {
                    replyForm.slideUp();  // 如果表单可见，则收起表单
                    // 重新设置 setInterval
                    intervalId = setInterval(checkNewComments, 3000);
                } else {
                    // 暂停 setInterval
                    clearInterval(intervalId);
                    replyForm.slideDown();  // 否则展开表单
                }
            });
        }


        function ClickInsideReply() {

            // 为共同的父元素绑定事件委托
            $(document).on('click', '.reply_inside_btn', function (event) {
                event.stopPropagation();

                // 找到相应的回复表单
                var replyForm = $(this).closest(".reply_div").find(".reply_form_inside");
                // 如果表单已经可见，再次点击将关闭表单
                if (replyForm.is(":visible")) {
                    replyForm.slideUp();  // 如果表单可见，则收起表单
                    // 重新设置 setInterval
                    intervalId = setInterval(checkNewComments, 3000);
                } else {
                    // 暂停 setInterval
                    clearInterval(intervalId);
                    replyForm.slideDown();  // 否则展开表单
                }
            });
        }


        function AddReply() {
            // 为共同的父元素绑定事件委托
            $(document).on('click', '.remark_reply_inside_btn', function (event) {
                // 防止表单默认提交
                event.preventDefault();

                var $btn = $(this);

                // 获取评论内容
                var replyContent = $btn.closest(".reply_div").find(".reply_content_inside").val();
                var remarkId = $btn.closest(".w_container-big").find(".w_empty_box").text();
                var replyId = $btn.closest('.reply_div').find('.reply_id_div').text();

                // 发送实际的Ajax请求
                $.ajax({
                    url: "{% url '创建子回复' %}",
                    type: "POST",
                    data: {
                        frontend_source: 'RemarkPage',
                        remark_id: remarkId,
                        content: replyContent,
                        reply_id: replyId,
                        post_id: {{ post_id }}
                    },
                    success: function (response) {
                        if (response.status) {
                            var newComment = response.new_comment;
                            var newReplyHtml = `
                    <div class="reply_div">
                        <div class="reply_div_left"><a href="/video/videointro/selfinformation/${newComment.author.id}/"><img src="
                            /media/${newComment.author.avatar_url}" alt="头像"
                                                                    class="avatar"
                                                                    style="border-radius: 50%; width: 50%; height: 50%;"></a></div>
                        <div class="reply_div_right">
                            <div class="reply_top_div">
                                <div class="reply_user">${newComment.author.username}&nbsp;回复&nbsp;
                                    ${newComment.UserId.username}</div>
                                <div class="reply_time">${newComment.publishTime}</div>
                                <div class="reply_likes reply_likes_btn">赞&nbsp;
                                    ${newComment.likesNumber}</div>
                                <div class="reply_dislikes reply_dislikes_btn">
                                    踩&nbsp;${newComment.dislikesNumber}</div>
                                <div class="reply_inside_div reply_inside_btn">回复</div>
                                <div class="reply_id_div" style="display: none;">${newComment.id}</div>
                            </div>
                            <hr class="custom-hr">
                                <div class="reply_content">${newComment.content}</div>
                                <div class="reply_form_bottom_div">
                                    <form class="reply_form_inside comment_reply_form" method="post"
                                          style="display: none;" role="form" action=""
                                          enctype="multipart/form-data">
                                        <textarea name="reply_content"
                                                  class="file-comment reply_content_inside reply_textarea_inside"
                                                  cols="100%" rows="1" maxlength="3000" required
                                                  placeholder="在这里写回复..."></textarea>
                                        <div class="remark_button_div">
                                            <button type="button"
                                                    class="form-control btn btn-link remark_reply_inside_btn"
                                                    style="border-radius: 5px">
                                                回复
                                            </button>
                                        </div>
                                    </form>
                                </div>
                        </div>
                    </div>
                `;

                            // 可以在这里更新UI等
                            $btn.closest(".reply_div").after(newReplyHtml);
                            $btn.closest(".reply_div").find(".reply_content_inside").val(''); // 清空输入框内容
                            // 重新设置 setInterval
                            intervalId = setInterval(checkNewComments, 3000);
                        }
                    },
                    error: function (xhr, errmsg, err) {
                        console.log("Error:", err);
                    }
                });
            });
        }


        //新增评论
        function AddRemark() {
            $(document).on('click', '#comment_reply_submit_btn', function (event) {
                event.preventDefault(); // 阻止表单默认提交行为

                // 获取评论内容
                var commentContent = $('#MyRemark').val();

                // 发送 AJAX 请求
                $.ajax({
                    url: '{% url '增加评论' %}',
                    type: 'POST',
                    data: {
                        frontend_source: 'RemarkPage',
                        post_id: {{ post_id }},
                        'content': commentContent,
                        'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
                    },
                    success: function (response) {
                        if (response.status) {
                            // 更新评论区的 HTML 内容
                            updateCommentSection(response.new_comment);
                            // 清空输入框
                            $('#MyRemark').val('');
                        } else {
                            // 处理错误情况
                            console.log('Error submitting comment:', response.error);
                        }
                    },
                    error: function (xhr, errmsg, err) {
                        // 处理 AJAX 请求错误
                        console.log('AJAX Error:', err);
                    }
                });
            });
        }

        function updateCommentSection(newComment) {
            var newCommentHtml = `
        <div class="w_container-big">
            <div class="w_avatar"><a href="/video/videointro/selfinformation/${newComment.UserId.id}/"><img src="/media/${newComment.UserId.avatar_url}" alt="头像" class="avatar"></a></div>
            <div class="w_container">
                <div class="w_row">
                    <div class="w_box" style="font-weight: bold;">${newComment.UserId.username}</div>
                    <div class="w_box">${newComment.publishTime}</div>
                    <div class="w_box remeak_like_btn">赞&nbsp;${newComment.likesNumber}</div>
                    <div class="w_box remeak_unlike_btn">踩&nbsp; ${newComment.dislikesNumber}</div>
                    <div class="w_box reply_btn">回复</div>
                    <div class="w_empty_box" id="hiddenDiv" style="display: none;">${newComment.id}</div>
                </div>
                <hr class="custom-hr">
                <div class="w_content">
                    <p>${newComment.content}</p>
                </div>
                <div class="w_other_reply">
                     <div class="reply_big_div"></div>
                     <form class="reply_form comment_reply_form" method="post" style="display: none;"
                           role="form" action="" enctype="multipart/form-data">
                           <textarea name="reply_content" class="file-comment reply_content reply_textarea" cols="100%"
                                rows="2" maxlength="3000" required placeholder="在这里写回复..."></textarea>
                           <div class="remark_button_div">
                                <button type="button"
                                                class="form-control btn btn-link remark_reply_btn"
                                                style="border-radius: 5px">
                                            回复
                                </button>
                           </div>
                     </form>
                </div>
            </div>
        </div>
    `;
            // 将新的评论 HTML 插入到 remark_big_div 中
            $('.remark_big_div').prepend(newCommentHtml);
        }


        //回复点赞
        function Click_reply_likes_btn() {
            $(document).on('click', '.reply_likes_btn', function (event) {
                event.stopPropagation();
                var btn = $(this);

                var replyId = btn.closest('.reply_div').find('.reply_id_div').text();
                console.log(replyId);

                $.ajax({
                    url: '{% url '回复点赞' %}',
                    type: 'POST',
                    data: {
                        frontend_source: 'RemarkPage',
                        'reply_id': replyId,
                    },
                    success: function (response) {
                        if (response.status) {
                            // likenumber=response.new_like_count;
                            btn.closest('.reply_div').find('.reply_likes_btn').text('赞 ' + response.new_like_count);
                        }

                    },
                    error: function (xhr, errmsg, err) {
                        // 处理错误
                        console.log('Error:', err);
                    }
                });
            });
        }

        //回复踩
        function Click_reply_dislikes_btn() {
            $(document).on('click', '.reply_dislikes_btn', function (event) {
                event.stopPropagation();
                var btn = $(this);

                var replyId = btn.closest('.reply_div').find('.reply_id_div').text();
                console.log(replyId);

                $.ajax({
                    url: '{% url '回复差评' %}',
                    type: 'POST',
                    data: {
                        frontend_source: 'RemarkPage',
                        'reply_id': replyId,
                    },
                    success: function (response) {
                        if (response.status) {
                            // likenumber=response.new_like_count;
                            btn.closest('.reply_div').find('.reply_dislikes_btn').text('踩 ' + response.new_unlike_count);
                        }

                    },
                    error: function (xhr, errmsg, err) {
                        // 处理错误
                        console.log('Error:', err);
                    }
                });
            });
        }

        //帖子点赞
        function clickLike() {
            $(document).on('click', '.like_btn', function (event) {
                // 发送赞操作的 AJAX 请求
                $.ajax({
                    url: '{% url '帖子点赞' %}',
                    type: 'POST',
                    data: {
                        frontend_source: 'RemarkPage',
                        post_id: {{ post_id }}, // 假设这里是您要赞的项目的唯一标识符
                    },
                    success: function (response) {
                        // 处理成功响应
                        // 更新点赞数量等相关内容
                        if (response.status) {
                            // likenumber=response.new_like_count;
                            $('.count_number').text(response.new_like_count);
                        }
                    },
                    error: function (xhr, errmsg, err) {
                        // 处理错误
                        console.log('Error:', err);
                    }
                });
            });
        }

        //帖子踩
        function clickunLike() {
            $(document).on('click', '.unlike_btn', function (event) {
                // 发送赞操作的 AJAX 请求
                $.ajax({
                    url: '{% url '帖子差评' %}',
                    type: 'POST',
                    data: {
                        frontend_source: 'RemarkPage',
                        post_id: {{ post_id }}, // 假设这里是您要赞的项目的唯一标识符
                    },
                    success: function (response) {
                        // 处理成功响应
                        // 更新点赞数量等相关内容
                        if (response.status) {
                            // likenumber=response.new_like_count;
                            $('.count_number').text(response.new_like_count);
                        }
                    },
                    error: function (xhr, errmsg, err) {
                        // 处理错误
                        console.log('Error:', err);
                    }
                });
            });
        }


        //评论点赞
        function click_remeak_like_btn() {
            $(document).on('click', '.remeak_like_btn', function (event) {
                event.stopPropagation();
                var btn = $(this);

                var remarkId = btn.closest('.w_container-big').find('.w_empty_box').text();
                console.log(remarkId);

                $.ajax({
                    url: '{% url '评论点赞' %}',
                    type: 'POST',
                    data: {
                        frontend_source: 'RemarkPage',
                        'remark_id': remarkId,
                    },
                    success: function (response) {
                        if (response.status) {
                            // likenumber=response.new_like_count;
                            btn.closest('.w_container-big').find('.remeak_like_btn').text('赞 ' + response.new_like_count);
                        }

                    },
                    error: function (xhr, errmsg, err) {
                        // 处理错误
                        console.log('Error:', err);
                    }
                });
            });
        }

        //评论踩
        function click_remeak_unlike_btn() {
            $(document).on('click', '.remeak_unlike_btn', function (event) {
                event.stopPropagation();
                var btn = $(this);

                var remarkId = btn.closest('.w_container-big').find('.w_empty_box').text();

                $.ajax({
                    url: '{% url '评论差评' %}',
                    type: 'POST',
                    data: {
                        frontend_source: 'RemarkPage',
                        'remark_id': remarkId,
                    },
                    success: function (response) {
                        if (response.status) {
                            // likenumber=response.new_like_count;
                            btn.closest('.w_container-big').find('.remeak_unlike_btn').text('踩 ' + response.new_unlike_count);
                        }
                    },
                    error: function (xhr, errmsg, err) {
                        // 处理错误
                        console.log('Error:', err);
                    }
                });
            });
        }
    </script>

{% endblock %}